import { useState, useEffect } from 'react'
import { RouterProvider as ReactRouterProvider, Outlet, useRoutes } from 'react-router-dom'
import { useGameListStore } from '@/stores/home'
import { SidebarProvider } from '@/components/ui/sidebar'
import Sidebar from '@/components/layout/Sidebar'
import Operationbar from '@/components/layout/Operationbar'
import { Button } from '@/components/ui/button'
import { allRoutes } from '@/routes'
import { createAppRouter } from '@/routes/generateRoutes'
import '@/styles/globals.css'
import type { GameList } from '@/types/game'

export default function App(): JSX.Element {

  const Router = () => useRoutes(allRoutes)

  const { gameList, setGameList, activeGame, setActiveGame } = useGameListStore()
  const [gameListLoading, setGameListLoading] = useState<boolean>(true)

  useEffect(() => {
    fetchGameList()
  }, [])

  const fetchGameList = (): void => {
    fetch('/mock/game-list.json').then((res: Response) => {
      res.json().then((data: GameList) => {
        setGameList(data)
        setActiveGame(data[0])
        setTimeout(() => {
          setGameListLoading(false)
        }, 3000)
      })
    })
  }

  console.log('render', 'App')

  return <div className='w-full h-full flex'>
    <SidebarProvider>
      <Sidebar gameList={gameList} activeGame={activeGame} setActiveGame={setActiveGame} gameListLoading={gameListLoading} />
      <main className='main-container'>
        <div className='main-content'>
          <Router />
          <Outlet />
        </div>
      </main>
      <Operationbar gameList={gameList} activeGame={activeGame} setActiveGame={setActiveGame} gameListLoading={gameListLoading} />
    </SidebarProvider>
  </div>
}
